<template>
	<view class="cust-line">
		<template v-if="!isEopt">
			<qiun-data-charts type="area" :opts="opts" :chart-data="chartData" :ontouch="true" :canvas2d="true">
			</qiun-data-charts>
		</template>
		<template v-if="isEopt">
			<qiun-data-charts type="area" :opts="eopts" :chart-data="chartData" :ontouch="true" :canvas2d="true">
			</qiun-data-charts>
		</template>
	</view>
</template>

<script>
	export default {
		name: "cust-line",
		props: {
			option: {
				type: Object,
				default () {
					return {

					}
				}
			},
			isEopt: {
				type: Boolean,
				default: false,
			},
			min: {
				type: Number,
				default: 0
			},
			max: {
				type: Number|Object,
				default: ()=>{
					return null;
				}
			},

			data: {
				type: Array | Object,
				default () {
					return {};
				}
			}
		},
		data() {
			return {
				opts: Object.assign({
					update: true,
					scrollPosition:"right",
					touchMoveLimit: 24,
					enableScroll: true,
					color: ['#06b7f3', '#FF3400', '#00D0D8', '#FFFFFF'],
					dataPointShapeType: 'hollow',
					dataLabel: false,
					padding: [30, 10, 20, 10],
					legend: {
						show: false
					},
					xAxis: {
						disabled: false,
						disableGrid: true,
						axisLineColor: '#C9D3E9',
						fontColor: '#999999',
						itemCount: 5,
						scrollAlign: "right",
					},
					yAxis: {
						gridColor: '#C9D3E9',
						gridType: 'solid',
						data: [{
							min:this.min,
							max:this.max,
							axisLine: false,
							fontColor: '#999999',
						}]
					},
					extra: {
						area: {
							type: "curve",
							addLine: true,
							opacity: 0.2,
							width: 2,
							activeType: "solid",
						}
					}


				}, this.option),
				eopts: Object.assign({

				}, this.option),
				chartData: {},
			}
		},
		methods: {
			updateData(data = {}, done = null) {
				let chartData = JSON.parse(JSON.stringify(data));
				if (!this.isEopt) {
					this.opts.xAxis['disabled'] = chartData.categories.length <= 0 ? true : false;
				} else {
					this.eopts.xAxis['disabled'] = chartData.categories.length <= 0 ? true : false;
				}
				this.$set(this, "chartData", chartData)
				if (typeof done == "") {
					done();
				}
			},
			updateOption(opts){
				this.$set(this, "opts", opts)
			}
		}
	}
</script>

<style lang="scss">
	.cust-line {
		min-height: 210px;
	}
</style>
